<!--
 * @Date: 2023-05-18 20:42:13
 * @LastEditTime: 2023-09-12 17:35:13
 * @FilePath: /wkw/src/views/withdrawalCoin/index.vue
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('ti-bi')"
  }
}
</route>
<script lang="ts" setup>
import { toast } from "@@/hooks/vantHooks";
import useBalanceStore from "@@/store/useBalanceStore";
import { fixedDecimals, normalNumber } from "@@/utils/tools/format";
import { showDialog } from "vant";
import { apiWithdrawCoin } from "@@/api/module/balance";

const balanceStore = useBalanceStore();
const WKC = computed(() => balanceStore.getCoinByCode("WKC"));
balanceStore.getWithdrawalInfo();
const formData = reactive({
  amount: "",
});
function maxBtn() {
  formData.amount = normalNumber(WKC.value?.gameBalance || "");
}
const servePrice = computed(
  () =>
    Number(WKC.value?.withdrawal?.withdraw_fee) /
    Number(WKC.value?.withdrawal?.price)
);
const currentCoinMin = computed(() => {
  const mini = Number(WKC.value?.withdrawal?.min_withdraw);
  if (mini > servePrice.value) return mini;
  return servePrice.value + 1;
});
const { t } = useI18n();
/**按钮加载状态 */
const btnLoading = reactive({
  submitBtn: false,
});
async function submitBtn() {
  btnLoading.submitBtn = true;
  await balanceStore.getWithdrawalInfo();
  btnLoading.submitBtn = false;
  const amount = Number(formData.amount);
  const coin = WKC.value!;
  const mini = currentCoinMin.value || 0;
  if (!(amount > mini)) {
    return toast.text(`${t("shu-liang-bu-neng-xiao-yu")}${mini}${coin.code}`);
  }
  btnLoading.submitBtn = true;
  const balance = await balanceStore.findGameBalance(coin);
  btnLoading.submitBtn = false;
  if (!(amount <= Number(balance))) return toast.text(t("yu-e-bu-zu"));
  withdrawCoin(coin, amount);
}
/**发起提币 */
function withdrawCoin(coin: CoinPay, amount: number) {
  showDialog({
    title: t("qing-que-ren"),
    message: `${t("ti-bi-shu-liang")} ${amount}${coin?.code}`,
  }).then(async () => {
    btnLoading.submitBtn = true;
    await apiWithdrawCoin({ coin_id: coin.id, number: amount });
    btnLoading.submitBtn = false;
  });
}
</script>
<template>
  <CpageView>
    <div class="auto-MT-md">
      <Ccard>
        <div class="auto-MT-md">
          <div class="flex-J-SB flex-A-C">
            <div class="flex-A-C auto-ML-xs">
              <Rimage size="2em" :src="WKC?.logo" />
              <div class="ML-xs">{{ WKC?.code }}</div>
            </div>
            <div class="T-S-sm">
              <span>{{ $t("yue") }} </span>
              <span>{{ fixedDecimals(WKC?.gameBalance, 4) }}</span>
            </div>
          </div>
          <Rinput
            label-align="top"
            class="T-S-sm"
            :label="$t('shu-liang')"
            type="number"
            v-model="formData.amount"
            :border-mode="'bottom'"
            :placeholder="'0.00'"
          >
            <template #button>
              <Rbutton @click="maxBtn" :size="'small'"> MAX </Rbutton>
            </template>
          </Rinput>
        </div>
      </Ccard>
      <Cgrid class="T-S-sm" col="auto 1fr" :justify="'start'">
        <CgridItem> {{ $t("zui-di") }} </CgridItem>
        <CgridItem :justify="'end'">
          {{ fixedDecimals(currentCoinMin, 4) }}
          {{ WKC?.code }}
        </CgridItem>
        <CgridItem>
          {{ $t("jia-ge") }}
        </CgridItem>
        <CgridItem :justify="'end'">
          <span>1</span>
          <span>{{ WKC?.code }}</span>
          <span> = </span>
          <span>{{ fixedDecimals(Number(WKC?.withdrawal?.price), 6) }}</span>
          <span>USDT</span>
        </CgridItem>

        <CgridItem> {{ $t("shou-xu-fei") }} </CgridItem>
        <CgridItem :justify="'end'">
          {{ fixedDecimals(servePrice) }}{{ WKC?.code }}
        </CgridItem>
      </Cgrid>
      <Rbutton
        @click="submitBtn"
        :loading="btnLoading.submitBtn"
        bg="var(--C-M1)"
        :size="'large'"
      >
        {{ $t("ti-bi") }}
      </Rbutton>
      <div
        @click="$router.push({ name: 'withdrawalCoinLogs' })"
        class="T-S-sm T-A-R"
      >
        {{ $t("ti-bi-ji-lu") }}
      </div>
    </div>
  </CpageView>
</template>
<style lang="scss" scoped></style>
